<template>
  <div class="Orderbody">
    <TopNav></TopNav>
    <div class="OrderContent">
      <!-- 确认收货地址 -->
      <div class="address">
        <span>确认收货地址</span>
        <span @click="addshopadd">添加新地址</span>
      </div>
      <div class="addresscontain">
        <div class="addressselect" v-for="(item,index) in addArr" :key="index">
          <el-radio v-model="selectAdd" :label="item.id" border @change="selectChange">
            {{item.receiverProvince}} {{item.receiverCity}} {{item.receiverDistrict}} {{item.receiverAddress}}
            ({{item.receiverName}} 收) 手机：{{item.receiverMobile}}
          </el-radio>
        </div>
      </div>

      <div class="Orderlist">
        <div class="title">
          <span>确定订单信息</span>
        </div>
        <div class="shoplist">
          <div class="shoplistImg">
            <img :src="imgbaseUrl+ shoplist[0].productImage" alt />
          </div>
          <div class="shoplistName">{{shoplist[0].productName}}</div>
          <div class="shoplistQuantity">
            <div>数量：{{shoplist[0].quantity}}</div>
            <div>单价：￥{{shoplist[0].currentUnitPrice}}</div>
            <div>
              总价：
              <span>￥{{shoplist[0].totalPrice}}</span>
            </div>
          </div>
        </div>
        <div class="putOrder">
          <div class="Order">
            <div class="OrderMoney">
              付款:
              <span>￥</span>
              <span>{{shoplist[0].totalPrice}}</span>
            </div>
            <div>寄送至:{{putAdd.receiverProvince}} {{putAdd.receiverCity}} {{putAdd.receiverDistrict}} {{putAdd.receiverAddress}}</div>
            <div>收货人:{{putAdd.receiverName}} （电话）{{putAdd.receiverMobile}}</div>
          </div>
          <el-button icon="el-icon-shopping-cart-1" @click="addOrder">提交订单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "../../components/Show/TopNav";
import { mapState } from "vuex";
export default {
  components: {
    TopNav,
  },
  computed: {
    ...mapState({
      orderItemList: (state) => state.shopSelect.orderItemList,
    }),
  },
  data() {
    return {
      addArr: [],
      orderId: "",
      // 地址id
      selectAdd: "",
      // 商品集合
      shoplist: [],
      putAdd: {},
      // 用户id
      userId: "",
      // 订单号
      orderNumber: "",
      // 支付价格
      payment: "",
      // 支付类型,
      paymentType: 1,
      // 订单状态
      status: 1,
      // 运费
      postage: 0,
      // 地址id
      addressId: "",
      imgbaseUrl:"https://phone-shop.oss-cn-beijing.aliyuncs.com/"
    };
  },
  methods: {
    // 获取地址详细
    async getUserAddress() {
      // console.log(this.$store.state.user.userInfo.id)
      const { data: res } = await this.$http.get("/address/list");
      if (res.code !== 200) {
        return this.$message.danger("获取地址失败");
      }
      this.addArr = res.data;
      this.selectAdd = this.addArr[0].id;
      //   this.addArr = res.data.map((item) => {
      //     console.log(item.updateTime);
      //     item.updateTime = this.timeStamp2String(item.updateTime);
      //     console.log(item.updateTime);
      //     return item;
      //   });
      console.log("选中的id", this.selectAdd);
      this.getAddrByID(this.selectAdd);
      console.log("地址详情:", this.addArr);
      // console.log("商品信息：", this.orderItemList);
    },
    async getAddrByID(id) {
      const { data: res } = await this.$http.get("/address/detail", {
        params: { id: id },
      });
      if (res.code !== 200) {
        return this.$message.success("获取地址失败");
      }
      this.putAdd = res.data;
      console.log(res);
    },
    selectChange(value) {
      this.getAddrByID(value);
    },
    async addOrder() {
      const { data: res } = await this.$http.get("/order/getOrderNumber");
      if (res.code !== 200) {
        return this.$message.info("获取订单号失败");
      }
      this.orderNumber = res.data;
      this.payment = this.shoplist[0].totalPrice;
      this.addressId = this.selectAdd;
      // console.log("商品订单号：", this.orderNumber);
      // console.log("支付价格", this.payment);

      // console.log("支付类型", this.paymentType);
      // console.log("运费", this.postage);
      // console.log("地址id", this.addressId);
      // console.log("订单状态：", this.status);
      this.shoplist[0].orderNumber = this.orderNumber;
      // console.log("商品集合", this.shoplist);
      let param = {
        orderNumber: this.orderNumber,
        payment: this.payment,
        addressId: this.addressId,
        postage: this.postage,
        status: this.status,
        paymentType: this.paymentType,
        orderItemList: this.shoplist,
      };
      console.log(param);
      // let param = new URLSearchParams();
      // param.append("orderNumber", this.orderNumber);
      // param.append("payment", this.payment);

      // param.append("addressId", this.addressId);

      // param.append("postage", this.postage);
      // param.append("status", this.status);
      // param.append("paymentType", this.paymentType);
      // const List = Object.entries(this.shoplist);
      // const orderItemList = new Map(List)

      // console.log("orderItemList",List);
      // console.log(typeof List);
      // param.append('orderItemList',List)
      // console.log( "封装", JSON.stringify(param));

      // await this.$http.post('/pay/aLi')

      const { data: result } = await this.$http.post("/order/add", param);
      if (result.code !== 200) {
        return this.$message.danger("增加订单地址失败");
      }
      this.orderId = result.data;
      console.log("订单id", this.orderId);
      let payForm = {
        out_trade_no: this.orderNumber,
        total_amount: this.payment,
        subject: "订单描述",
        orderId: this.orderId,
      };
      console.log("payForm",payForm);
      const { data: payres } = await this.$http.post("/pay/aLi", payForm);
      // if (payres.code !== 200) {
      //   return this.$message.info("请求支付失败");
      // }
      console.log(payres);
      document.querySelector("body").innerHTML = payres;
      document.forms[0].submit();
    },
    addshopadd() {
      return this.$router.push('/userAddress')
    },
  },
  created() {
    this.getUserAddress();
    // this.getAddrByID(this.selectAdd)
    this.shoplist = JSON.parse(window.sessionStorage.getItem("shoplist"));
    console.log("session", this.shoplist);
    // if (this.orderItemList == "") {
    //   this.$store.commit("setOrderItem", this.shoplist);
    //   console.log("商品信息空");
    //   console.log("session:", this.shoplist);
    // } else {
    //   console.log("商品信息", this.orderItemList);
    //   console.log("session:", this.shoplist);
    // }
  },
};
</script>

<style lang="scss" scoped>
.Orderbody {
  width: 100%;
  height: 100%;
}
.OrderContent {
  // border: 1px solid #eee;
  padding: 15px;
  width: 90%;
  margin: 0 auto;
  .address {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 3px;
    font-weight: bold;
    font-size: 20px;
    span:nth-child(2) {
      font-size: 16px;
      color: blue;
    }
    span:nth-child(2):hover {
      cursor: pointer;
    }
  }
}
.addresscontain {
  margin-top: 20px;

  .el-radio {
    width: 100%;
    padding-left: 60px;
  }
}
.Orderlist {
  margin-top: 20px;
  .title {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding: 0 10px 3px;
  }
  .shoplist {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 100px;
      height: 100px;
    }
    .shoplistImg {
      width: 100px;
    }
    .shoplistName {
      margin-left: 10px;
      width: 450px;
      flex-wrap: wrap;
    }
    .shoplistQuantity {
      display: flex;
      justify-content: space-between;
      flex: 1;
      div {
        display: flex;
        align-items: center;
        margin-left: 20px;
        span {
          color: #f96;
          font-size: 20px;
        }
      }
    }
  }
  .putOrder {
    margin-top: 30px;
    font-size: 20px;
    margin-bottom: 30px;

    float: right;
    text-align: right;
    min-width: 400px;
    .Order {
      padding: 15px;
      border: 1px solid #f90;
      .OrderMoney {
        span {
          font-size: 25px;
          color: #ccc;
        }
        span:nth-child(2) {
          color: #f96;
          font-size: 30px;
        }
      }
    }
    .el-button {
      background-color: #ff5000;
      font-size: 20px;
      color: #fff;
    }
  }
}
</style>